<template>
  <CommonPage>
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      list-key="niche_list"
      :columns="columns"
      :get-data="nicheApi.list"
      :index="true"
      :query-format="queryFormat"
    >
      <template #search>
        <MyTQI>
          <n-input
            v-model:value="queryItems.searchVal"
            type="text"
            placeholder="请输入商机、客户名称"
            clearable
          >
            <template #suffix>
              <n-icon size="20" :component="Search"></n-icon>
            </template>
          </n-input>
        </MyTQI>

        <MyTQI>
          <AsyncSelect
            v-model:value="queryItems.phase"
            placeholder="选择阶段"
            options="BUSINESS_OPPORTUNITY"
            @load-dict="(dict) => (statusOptions = dict)"
          />
        </MyTQI>

        <MyTQI label="接入时间" :content-width="300">
          <n-date-picker
            v-model:formatted-value="queryItems.timeRange"
            type="daterange"
            clearable
          />
        </MyTQI>
      </template>
      <template #action>
        <n-button v-permission="`niche_add`" type="primary" @click="$nicheForm?.handleAdd">
          添加商机
        </n-button>
      </template>
    </MyTable>
    <NicheForm ref="$nicheForm" @result="onResult" />
  </CommonPage>
</template>

<script setup lang="jsx">
import { Search } from '@vicons/ionicons5'
import * as nicheApi from '@/api/niche'
import NicheForm from './modules/NicheForm.vue'
defineOptions({ name: 'NicheIndex' })
const router = useRouter()
const statusOptions = ref([])
function queryFormat({ timeRange, ...params }) {
  if (timeRange?.length === 2) {
    const [startTime, endTime] = timeRange
    params.startTime = startTime
    params.endTime = endTime
  }
  return params
}
const queryItems = ref({})
const $nicheForm = ref(null)
const columns = [
  {
    title: '商机名称',
    key: 'name',
  },
  {
    title: '商机描述',
    key: 'resume',
  },
  {
    title: '客户',
    key: 'customerManagementDtoList',
    render({ customerManagementDtoList = [] }) {
      return customerManagementDtoList.map((item) => item.name).join('；')
    },
  },
  {
    title: '对接人',
    key: 'customerManagementDtoList',
    render({ customerManagementDtoList = [] }) {
      return customerManagementDtoList
        .map((item) => item.contactorDtoList || [])
        .flat()
        .map((item) => item.contactorName)
        .join('；')
    },
  },
  {
    title: '接入时间',
    key: 'abutmentTime',
    render: ({ abutmentTime }) => $format(abutmentTime),
  },
  {
    title: '阶段',
    key: 'phase',
    render(row) {
      return <MyStatus options={statusOptions.value} value={row.phase} />
    },
  },
  {
    title: '创建时间',
    key: 'createTime',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建人',
    key: 'createUserName',
  },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button
            text
            v-permission="niche_detail"
            onClick={() => router.push({ path: `/niche/detail`, query: { id: row.id } })}
          >
            查看
          </n-button>
          <n-button
            text
            v-permission="niche_update"
            onClick={() => $nicheForm?.value?.handleEdit(row)}
          >
            修改
          </n-button>
          <n-button
            text
            v-permission="niche_delete"
            onClick={() =>
              $nicheForm?.value?.handleDelete(row.id, {
                title: '删除商机',
                content: `请确定是否删除商机：${row.name}`,
              })
            }
          >
            删除
          </n-button>
        </n-flex>
      )
    },
  },
]
const $table = ref(null)
function onResult(actionType) {
  const ACTIONS = {
    view: '查看',
    edit: '修改',
    add: '添加',
    del: '删除',
  }
  $message.success(`${ACTIONS[actionType]}${name}成功!`)
  if (actionType !== 'add') {
    $table?.value?.handleQuery()
  } else {
    $table?.value?.handleSearch()
  }
}
</script>
